<template>
  <div class="views">
    <header>
      <div @click="goLogin()">＜返回</div>
    </header>
    <div class="content">
      <h3>账号注册</h3>
      <div class="input-border">
        <img src="./image/shoujihao.png" />
        <input
          v-model="info.username"
          type="text"
          placeholder="请输入用户名/手机号"
        />
      </div>
      <div class="input-border">
        <img src="./image/mima.png" />
        <input
          v-model="info.code"
          class="captcha-input"
          type="text"
          placeholder="请输入验证码"
        />
        <div id="captcha-bottom" @click="eq">获取验证码</div>
      </div>
      <div class="input-border">
        <img id="psw-im" src="./image/suo.png" />
        <input
          v-model="info.password"
          type="password"
          placeholder="请设置登录密码（6-12位）"
        />
      </div>
      <div class="confirm">
        <div class="confirm-btn" @click="submit">完成</div>
        <p class="confirm-tis">
          点击完成则同意<a href="#">《XXXX用户协议》</a>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../../API/http";
export default {
  data() {
    return {
      info: {
        username: "",
        code: "",
        password: "",
      },
    };
  },
  methods: {
    async submit() {
      console.log(this.info);
      let { data } = await http._register(this.info);
      if (data.status === 1) {
        alert("该账号已注册");
        this.info = {
          username: "",
          code: "",
          password: "",
        };
      } else {
        alert("注册成功");
        this.$router.push({ path: "/online" });
      }
    },
    goLogin() {
      this.$router.go(-1);
      // location.reload();
    },
    async eq() {
      // console.log("1111");
      let { data } = await http._eq({"code":this.info.username});
      console.log(data);
    },
  },
};
</script>
<style scoped>
.views {
  width: 100%;
  background-color: white;
}

/* 页首 */
header {
  width: 100%;
  height: 64px;
  background-color: #2d2d2d;
  color: white;
}

header div {
  line-height: 64px;
  margin-left: 32px;
}

/* 内容 */
.content {
  text-align: center;
  position: relative;
  top: 34px;
}

.input-border {
  width: 260px;
  margin-top: 18px;
  border-bottom: 1px solid black;
  display: flex;
  flex-flow: row;
  margin-left: 50%;
  transform: translateX(-50%);
  padding-bottom: 6px;
}

.input-border img {
  width: 24px;
  height: 30px;
}

#psw-im {
  width: 18px;
  height: 20px;
}

.content .input-border input {
  border: 0;
  font-size: 16px;
  outline: none;
  color: black;
}

.captcha-input {
  width: 140px;
}

#captcha-bottom {
  width: 85px;
  height: 35px;
  line-height: 35px;
  background-color: #01a0f3;
  color: white;
  font-size: 14px;
  position: absolute;
  right: 0;
  bottom: 16%;
}

.confirm {
  margin-top: 20px;
  width: 260px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.confirm .confirm-btn {
  color: white;
  width: 260px;
  height: 40px;
  background-color: #01a0f3;
  line-height: 40px;
}

.confirm-tis {
  font-size: 13px;
  position: absolute;
  left: 0;
  top: 76%;
}

.confirm-tis a {
  color: #01a0f3;
}

/* 设置各个游览器input默认文字颜色和字体 */
::-webkit-input-placeholder {
  font-size: 12px;
  color: #cccccc;
}

::-moz-placeholder {
  font-size: 12px;
  color: #cccccc;
}

:-ms-input-placeholder {
  font-size: 12px;
  color: #cccccc;
}
</style>
